<template>
  <div class="home-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon">
            <i class="el-icon-document"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">笔记总数</div>
            <div class="stat-value">{{ getNotes.length }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon important">
            <i class="el-icon-star-on"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">重要笔记</div>
            <div class="stat-value">{{ importantNotes }}</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon categories">
            <i class="el-icon-collection-tag"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">笔记分类</div>
            <div class="stat-value">4</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-icon users">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">活跃用户</div>
            <div class="stat-value">2</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 系统信息和快捷操作 -->
    <el-row :gutter="20" class="info-row">
      <el-col :xs="24" :md="16">
        <el-card class="system-info" shadow="hover">
          <div slot="header" class="card-header">
            <span>系统信息</span>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="系统名称">笔记管理系统</el-descriptions-item>
            <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
            <el-descriptions-item label="服务器环境">Node.js + Vue</el-descriptions-item>
            <el-descriptions-item label="数据库">MongoDB</el-descriptions-item>
            <el-descriptions-item label="部署时间">2025-07-20</el-descriptions-item>
            <el-descriptions-item label="最后更新">2025-07-22</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :md="8">
        <el-card class="quick-actions" shadow="hover">
          <div slot="header" class="card-header">
            <span>快捷操作</span>
          </div>
          <div class="action-buttons">
            <el-button type="primary" icon="el-icon-document" @click="viewNotes">查看笔记</el-button>
            <el-button type="success" icon="el-icon-plus" @click="createNote">新建笔记</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近笔记 -->
    <el-card class="recent-notes" shadow="hover">
      <div slot="header" class="card-header">
        <span>最近笔记</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="viewNotes">查看更多</el-button>
      </div>
      <el-table :data="recentNotes" style="width: 100%">
        <el-table-column prop="id" label="ID" width="50"></el-table-column>
        <el-table-column prop="title" label="标题" min-width="120"></el-table-column>
        <el-table-column prop="content" label="内容" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="viewNote(scope.row)">查看</el-button>
            <el-button size="mini" type="success" @click="editNote(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      // 初始化事件总线
      $bus: new Vue()
    }
  },
  computed: {
    ...mapGetters(['getNotes']),
    /**
     * 获取最近的笔记（按创建时间倒序排列）
     * @returns {Array} 最近的笔记列表
     */
    recentNotes() {
      return [...this.getNotes]
        .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
        .slice(0, 5) // 只显示最近5条
    },
    /**
     * 获取重要笔记数量（示例，实际应根据笔记属性判断）
     * @returns {Number} 重要笔记数量
     */
    importantNotes() {
      // 假设有一个importance属性，大于3的为重要笔记
      return this.getNotes.filter(note => note.importance > 3).length || 1
    }
  },
  methods: {
    /**
     * 查看笔记列表
     */
    viewNotes() {
      this.$router.push('/notes')
    },
    
    /**
     * 创建新笔记
     */
    createNote() {
      // 通过事件总线触发打开新增笔记对话框的事件
      this.$bus.$emit('open-note-dialog')
      this.$router.push('/notes')
    },
    
    /**
     * 查看笔记详情
     * @param {Object} note - 笔记对象
     */
    viewNote(note) {
      // 通过事件总线触发查看笔记的事件
      this.$bus.$emit('view-note', note)
      this.$router.push('/notes')
    },
    
    /**
     * 编辑笔记
     * @param {Object} note - 笔记对象
     */
    editNote(note) {
      // 通过事件总线触发编辑笔记的事件
      this.$bus.$emit('edit-note', note)
      this.$router.push('/notes')
    }
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px 0;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  height: 100px;
  margin-bottom: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #409EFF;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin-right: 15px;
}

.stat-icon.important {
  background-color: #E6A23C;
}

.stat-icon.categories {
  background-color: #67C23A;
}

.stat-icon.users {
  background-color: #F56C6C;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.info-row {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-buttons .el-button {
  width: 100%;
  margin-left: 0;
}

.recent-notes {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .stat-cards .el-col {
    margin-bottom: 15px;
  }
  
  .info-row .el-col {
    margin-bottom: 15px;
  }
}
</style>